<template>
  <view class="stop-charging-page">

    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="nav-left" @click="goToHome">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
    </view>
    
    <!-- 圆形进度指示器 -->
    <view class="progress-container">
      <!-- 外环 - 合成后的加载动画 -->
      <view class="outer-ring">
        <!-- 灰色基底圆环 -->
        <view class="base-ring"></view>
        <!-- 旋转的橙色进度条 -->
        <view class="progress-ring"></view>
      </view>
      
      <!-- 中央大圆 -->
      <view class="central-circle">
        <text class="countdown-number">{{ countdown }}</text>
        <text class="countdown-unit">秒</text>
      </view>
    </view>
    
    <!-- 文字信息区域 -->
    <view class="text-info-section">
      <!-- 第一行：结束中... -->
      <view class="status-text">结束中...</view>
      
      <!-- 第二行：请勿关闭本页面,预计60秒内结束 -->
      <view class="instruction-text">请勿关闭本页面,预计60秒内结束</view>
      
      <!-- 第三块：安全说明 -->
      <view class="safety-text">
        <text>电桩属于高压设备出于安全考虑电压电流将逐渐降为零,</text>
        <text>请耐心等待最终结算费用</text>
      </view>
    </view>
  </view>
</template>

<script>
import { chargingOrderDetails } from '@/api/charging/index.js'

export default {
  data() {
    return {
      orderNum: '', // 订单号
      countdown: 60, // 倒计时秒数
      countdownTimer: null, // 倒计时定时器
      // 新增轮询相关变量
      pollingTimer: null, // 轮询定时器
      isPolling: false, // 是否正在轮询
      hasReachedTargetState: false, // 是否已达到目标状态
      maxPollingTime: 60, // 最大轮询时间（秒）
      currentPollingTime: 0 // 当前轮询时间
    }
  },
  
  onLoad(options) {
    // 获取传递的订单号
    if (options.orderNum) {
      this.orderNum = options.orderNum;
      console.log('获取到订单号:', this.orderNum);
    }
    
    // 启动倒计时
    this.startCountdown();
    
    // 启动轮询
    this.startPolling();
  },
  
  onUnload() {
    // 页面卸载时清理定时器
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
    }
    this.stopPolling();
  },
  
  methods: {
    // 启动倒计时
    startCountdown() {
      this.countdownTimer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          // 倒计时结束，清理定时器
          clearInterval(this.countdownTimer);
          this.countdownTimer = null;
          
          // 倒计时结束后停止轮询
          this.stopPolling();
          
          // 检查是否已经获取到chargeState为4
          if (!this.hasReachedTargetState) {
            // 显示延迟提示弹窗
            this.showDelayModal();
          }
        }
      }, 1000);
    },
    
    // 开始轮询
    startPolling() {
      if (this.isPolling) return;
      
      this.isPolling = true;
      this.currentPollingTime = 0;
      
      const poll = () => {
        if (!this.isPolling) return;
        
        this.currentPollingTime += 2; // 每2秒一次
        
        // 调用接口检查订单状态
        this.checkOrderStatus();
        
        // 如果还没达到目标状态且倒计时未结束，继续轮询
        if (!this.hasReachedTargetState && this.countdown > 0) {
          this.pollingTimer = setTimeout(poll, 2000);
        }
      };
      
      // 立即执行一次
      poll();
    },
    
    // 停止轮询
    stopPolling() {
      this.isPolling = false;
      if (this.pollingTimer) {
        clearTimeout(this.pollingTimer);
        this.pollingTimer = null;
      }
    },
    
    // 检查订单状态
    checkOrderStatus() {
      if (!this.orderNum) {
        console.error('订单号不存在');
        return;
      }
      
      console.log('查询订单状态，开始调用chargingOrderDetails接口');
      
      chargingOrderDetails({ orderNum: this.orderNum }).then(res => {
        console.log('订单状态查询结果:', res);
        
        if (res && res.code === 0 && res.success && res.data) {
          const orderData = res.data;
          
          // 检查chargeState是否为4
          if (orderData.chargeState === 4) {
            // 达到目标状态，停止轮询并跳转
            this.hasReachedTargetState = true;
            this.stopPolling();
            
            uni.showToast({
              title: '订单结算完成',
              icon: 'success'
            });
            
            // 跳转到订单详情页
            setTimeout(() => {
              uni.reLaunch({
                url: `/pages/orderDetail/orderDetail?orderNum=${this.orderNum}&from=stopCharging`
              });
            }, 1500);
          }
        } else {
          console.error('订单状态查询失败:', res.msg);
        }
      }).catch(err => {
        console.error('订单状态查询接口调用失败:', err);
      });
    },
    
    // 显示延迟提示弹窗
    showDelayModal() {
      uni.showModal({
        title: '提示',
        content: '订单信息延迟，系统正在结算中，请稍后查看',
        showCancel: false,
        confirmText: '返回首页',
        success: (res) => {
          if (res.confirm) {
            // 用户点击返回首页
            uni.reLaunch({
              url: '/pages/index/index'
            });
          }
        }
      });
    },

    // 返回首页
    goToHome() {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style scoped>
.stop-charging-page {
  background: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(7vh + 88rpx + 120rpx); /* 状态栏 + 导航栏 + 原有间距 */
}

/* 状态栏占位 */
.status-bar {
  height: 7vh;
  width: 100%;
  background-color: #ffffff;
}

/* 自定义导航栏 */
.custom-navbar {
  position: fixed;
  top: 7vh;
  left: 0;
  width: 100%;
  height: 88rpx; /* 导航栏高度 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  z-index: 10;
}

.nav-left, .nav-right {
  width: 80rpx; /* 左侧和右侧占位宽度 */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  display: flex;
  align-items: center;
}

.nav-title text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

/* 进度指示器容器 */
.progress-container {
  position: relative;
  width: 55vw; /* 总直径占页面宽度的55% */
  height: 55vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 80rpx;
}

/* 外环 - 合成后的加载动画 */
.outer-ring {
  position: absolute;
  width: 95%;
  height: 95%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* 灰色基底圆环 */
.base-ring {
  position: absolute;
  width: 95%;
  height: 95%;
  border: 8rpx solid #f0f0f0; /* 浅灰色环形 */
  border-radius: 50%;
  z-index: 1;
}

/* 旋转的橙色进度条 */
.progress-ring {
  position: absolute;
  width: 95%;
  height: 95%;
  border: 8rpx solid transparent;
  border-radius: 50%;
  border-top: 8rpx solid #ff9800; /* 橙色 */
  animation: rotate 2s linear infinite;
  z-index: 2;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 中央大圆 */
.central-circle {
  width: 35vw; /* 稍微增大中央圆的直径 */
  height: 35vw;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40rpx rgba(255, 152, 0, 0.3); /* 浅橙色外发光效果 */
  position: relative;
  z-index: 2;
}

/* 倒计时数字 */
.countdown-number {
  font-size: 80rpx;
  font-weight: bold;
  color: #333333;
  line-height: 1;
}

/* 倒计时单位 */
.countdown-unit {
  font-size: 32rpx;
  color: #333333;
  margin-top: 8rpx;
}

/* 文字信息区域 */
.text-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; 
  padding: 0 60rpx;
}

/* 状态文字 */
.status-text {
  font-size: 48rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 40rpx;
}

/* 说明文字 */
.instruction-text {
  font-size: 32rpx;
  color: #666666;
  margin-bottom: 40rpx;
  line-height: 1.5;
}

/* 安全说明文字 */
.safety-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.safety-text text {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
  max-width: 600rpx;
}
</style> 